<template>
  <view>
    <!-- 地址 -->
    <view v-if="orderDetail.province" class="address-section">
      <view class="order-content">
        <text class="yticon icon-shouhuodizhi"></text>
        <view class="cen">
          <view class="top">
            <text class="name">{{orderDetail.consignee}}</text>
            <text class="mobile">{{orderDetail.phone}}</text>
          </view>
          <text class="address">{{orderDetail.province}} {{orderDetail.city}} {{orderDetail.county}} {{orderDetail.address}}
          </text>
        </view>
        <text class="yticon icon-you"></text>
      </view>

      <image class="a-bg" src=""></image>
    </view>

    <view class="goods-section">
      <!-- 商品列表 -->
      <view v-for="(item, index) in orderDetail.skuList" :key="index" class="g-item">
        <image :src="item.img"></image>
        <view class="right">
          <text class="title clamp">{{item.spuTitle}}</text>
          <text class="spec">{{item.title}}</text>
          <view class="price-box">
            <text class="price"><text v-if="item.price < item.originalPrice" style="text-decoration:line-through">￥{{item.originalPrice | priceFormat}}</text><text>￥{{item.price | priceFormat}}</text></text>
            <text class="number">x {{item.num}}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 明细 -->
    <view class="yt-list">
      <view class="yt-list-cell b-b">
        <text class="cell-tit clamp">订单编号</text>
        <text class="cell-tip">{{orderDetail.orderNo}}</text>
      </view>
      <view class="yt-list-cell b-b">
        <text class="cell-tit clamp">订单状态</text>
        <text class="cell-tip">{{orderDetail.status | statusFilter}}</text>
      </view>
      <view v-if="orderDetail.status === 10" class="yt-list-cell b-b">
        <text class="cell-tit clamp">即将取消</text>
        <text class="cell-tip red">{{ cancelTime ? cancelTime : 'loading' }}</text>
      </view>
      <view v-if="orderDetail.status === 30" class="yt-list-cell b-b">
        <text class="cell-tit clamp">自动确认</text>
        <text class="cell-tip red">{{ confirmTime ? confirmTime : 'loading' }}</text>
      </view>
      <view class="yt-list-cell b-b">
        <text class="cell-tit clamp">商品金额</text>
        <text class="cell-tip">￥{{orderDetail.skuOriginalTotalPrice | priceFormat}}</text>
      </view>
      <view v-if="orderDetail.skuOriginalTotalPrice > orderDetail.skuTotalPrice" class="yt-list-cell b-b">
        <text class="cell-tit clamp">折扣金额</text>
        <text class="cell-tip red">-￥{{(orderDetail.skuOriginalTotalPrice - orderDetail.skuTotalPrice) | priceFormat}}</text>
      </view>
      <view v-if="orderDetail.couponPrice" class="yt-list-cell b-b">
        <text class="cell-tit clamp">优惠券减</text>
        <text class="cell-tip red">-￥{{orderDetail.couponPrice | priceFormat}}</text>
      </view>
      <view class="yt-list-cell b-b">
        <text class="cell-tit clamp">配送费用</text>
        <text class="cell-tip">{{orderDetail.freightPrice > 0 ?( '+¥' + (orderDetail.freightPrice / 100.0)) : '免运费'}}</text>
      </view>
      <view class="yt-list-cell b-b">
        <text class="cell-tit clamp">创建时间</text>
        <text class="cell-tip">{{orderDetail.gmtCreate | dateFormat}}</text>
      </view>
      <view v-if="orderDetail.payChannel" class="yt-list-cell b-b">
        <text class="cell-tit clamp">支付渠道</text>
        <text class="cell-tip">{{orderDetail.payChannel | payChannelFilter}}</text>
      </view>
      <view v-if="orderDetail.gmtPay" class="yt-list-cell b-b">
        <text class="cell-tit clamp">支付时间</text>
        <text class="cell-tip">￥{{orderDetail.gmtPay | dateFormat}}</text>
      </view>
      <view class="yt-list-cell desc-cell">
        <text class="cell-tit clamp">备注</text>
        <input class="desc" type="text" v-model="orderDetail.mono" disabled="true" />
      </view>
    </view>
  </view>
</template>

<script>
const payChannelMap = {
  WX: '微信支付',
  ALI: '支付宝',
  OFFLINE: '线下支付',
}
const statusMap = {
  10: '未付款',
  12: '正在拼团',
  20: '待出库',
  30: '待收货',
  40: '待评价',
  50: '已完成',
  60: '退款中',
  70: '已退款',
  80: '已取消',
  90: '已取消(系统)',
}
export default {
  filters: {
    priceFormat(price) {
      return price / 100.0
    },
    payChannelFilter(channel) {
      return payChannelMap[channel]
    },
    statusFilter(status) {
      return statusMap[status]
    },
  },
  data() {
    return {
      orderId: '',
      orderDetail: {
        skuList: [],
        totalOriginalPrice: 0,
        totalPrice: 0, //商品折扣（仅算VIP和限时打折）后总价
        coupon: undefined,
        mono: '',
      },
      cancelTime: '',
      confirmTime: '',
      reloadPageFlag: false,
    }
  },
  onLoad(option) {
    this.orderId = option.orderid
    this.loadData()
  },
  methods: {
    //显示优惠券面板
    loadData() {
      const that = this
      that.$api
        .request('order', 'getOrderDetail', {
          orderId: that.orderId,
        })
        .then((res) => {
          // 深拷贝
          that.orderDetail = JSON.parse(JSON.stringify(res.data))
          if (
            that.orderDetail.status === 10 &&
            that.orderDetail.cancelSec > 0
          ) {
            that.cancelTime = that.secondsToDays(that.orderDetail.cancelSec)
            const interval = setInterval(() => {
              that.orderDetail.cancelSec--
              if (that.orderDetail.cancelSec < 0) {
                clearInterval(interval)
                that.reloadPageFlag = true
                that.loadData()
                if (that.$api.prePage().loadData) {
                  that.$api.prePage().loadData()
                }
                return
              }
              that.cancelTime = that.secondsToDays(that.orderDetail.cancelSec)
            }, 1000)
          } else if (
            that.orderDetail.status === 30 &&
            that.orderDetail.confirmSec > 0
          ) {
            that.confirmTime = that.secondsToDays(that.orderDetail.confirmSec)
            const interval = setInterval(() => {
              that.orderDetail.confirmSec--
              if (that.orderDetail.confirmSec < 0) {
                clearInterval(interval)
                that.reloadPageFlag = true
                that.loadData()
                if (that.$api.prePage().loadData) {
                  that.$api.prePage().loadData()
                }
                return
              }
              that.confirmTime = that.secondsToDays(that.orderDetail.confirmSec)
            }, 1000)
          }
        })
    },
    secondsToDays(sec) {
      // 对一天取模
      let days = parseInt(sec / (60 * 60 * 24))
      // 对一小时取模
      let hours = parseInt((sec % (60 * 60 * 24)) / (60 * 60))
      // 对一分钟取模
      let minutes = parseInt(((sec % (60 * 60 * 24)) % (60 * 60)) / 60)
      // 剩下的为秒钟
      let seconds = parseInt(((sec % (60 * 60 * 24)) % (60 * 60)) % 60)
      let res = ''
      res += days ? days + '天' : ''
      res += hours ? hours + '小时' : ''
      res += minutes ? minutes + '分' : ''
      res += seconds + '秒'
      return res
    },
  },
}
</script>

<style lang="scss">
page {
  background: $page-color-base;
  padding-bottom: 100upx;
}

.address-section {
  padding: 30upx 0;
  background: #fff;
  position: relative;

  .order-content {
    display: flex;
    align-items: center;
  }

  .icon-shouhuodizhi {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90upx;
    color: #888;
    font-size: 44upx;
  }

  .cen {
    display: flex;
    flex-direction: column;
    flex: 1;
    font-size: 28upx;
    color: $font-color-dark;
  }

  .name {
    font-size: 34upx;
    margin-right: 24upx;
  }

  .address {
    margin-top: 16upx;
    margin-right: 20upx;
    color: $font-color-light;
  }

  .icon-you {
    font-size: 32upx;
    color: $font-color-light;
    margin-right: 30upx;
  }

  .a-bg {
    position: absolute;
    left: 0;
    bottom: 0;
    display: block;
    width: 100%;
    height: 5upx;
  }
}

.goods-section {
  margin-top: 16upx;
  background: #fff;
  padding-bottom: 1px;

  .g-header {
    display: flex;
    align-items: center;
    height: 84upx;
    padding: 0 30upx;
    position: relative;
  }

  .logo {
    display: block;
    width: 50upx;
    height: 50upx;
    border-radius: 100px;
  }

  .name {
    font-size: 30upx;
    color: $font-color-base;
    margin-left: 24upx;
  }

  .g-item {
    display: flex;
    margin: 20upx 30upx;

    image {
      flex-shrink: 0;
      display: block;
      width: 140upx;
      height: 140upx;
      border-radius: 4upx;
    }

    .right {
      flex: 1;
      padding-left: 24upx;
      overflow: hidden;
    }

    .title {
      font-size: 30upx;
      color: $font-color-dark;
    }

    .spec {
      font-size: 26upx;
      color: $font-color-light;
    }

    .price-box {
      display: flex;
      align-items: center;
      font-size: 32upx;
      color: $font-color-dark;
      padding-top: 10upx;

      .price {
        margin-bottom: 4upx;
      }

      .number {
        font-size: 26upx;
        color: $font-color-base;
        margin-left: 20upx;
      }
    }

    .step-box {
      position: relative;
    }
  }
}

.yt-list {
  margin-top: 16upx;
  background: #fff;
}

.yt-list-cell {
  display: flex;
  align-items: center;
  padding: 10upx 30upx 10upx 40upx;
  line-height: 70upx;
  position: relative;

  &.cell-hover {
    background: #fafafa;
  }

  &.b-b:after {
    left: 30upx;
  }

  .cell-icon {
    height: 32upx;
    width: 32upx;
    font-size: 22upx;
    color: #fff;
    text-align: center;
    line-height: 32upx;
    background: #f85e52;
    border-radius: 4upx;
    margin-right: 12upx;

    &.hb {
      background: #ffaa0e;
    }

    &.lpk {
      background: #3ab54a;
    }
  }

  .cell-more {
    align-self: center;
    font-size: 24upx;
    color: $font-color-light;
    margin-left: 8upx;
    margin-right: -10upx;
  }

  .cell-tit {
    flex: 1;
    font-size: 26upx;
    color: $font-color-light;
    margin-right: 10upx;
  }

  .cell-tip {
    font-size: 26upx;
    color: $font-color-dark;

    &.disabled {
      color: $font-color-light;
    }

    &.active {
      color: $base-color;
    }

    &.red {
      color: $base-color;
    }
  }

  &.desc-cell {
    .cell-tit {
      max-width: 90upx;
    }
  }

  .desc {
    flex: 1;
    font-size: $font-base;
    color: $font-color-dark;
  }
}

/* 支付列表 */
.pay-list {
  padding-left: 40upx;
  margin-top: 16upx;
  background: #fff;

  .pay-item {
    display: flex;
    align-items: center;
    padding-right: 20upx;
    line-height: 1;
    height: 110upx;
    position: relative;
  }

  .icon-weixinzhifu {
    width: 80upx;
    font-size: 40upx;
    color: #6bcc03;
  }

  .icon-alipay {
    width: 80upx;
    font-size: 40upx;
    color: #06b4fd;
  }

  .icon-xuanzhong2 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60upx;
    height: 60upx;
    font-size: 40upx;
    color: $base-color;
  }

  .tit {
    font-size: 32upx;
    color: $font-color-dark;
    flex: 1;
  }
}

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 995;
  display: flex;
  align-items: center;
  width: 100%;
  height: 90upx;
  justify-content: space-between;
  font-size: 30upx;
  background-color: #fff;
  z-index: 998;
  color: $font-color-base;
  box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);

  .price-content {
    padding-left: 30upx;
  }

  .price-tip {
    color: $base-color;
    margin-left: 8upx;
  }

  .price {
    font-size: 36upx;
    color: $base-color;
  }

  .submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 280upx;
    height: 100%;
    color: #fff;
    font-size: 32upx;
    background-color: $base-color;
  }
}

/* 优惠券面板 */
.mask {
  display: flex;
  align-items: flex-end;
  position: fixed;
  left: 0;
  top: var(--window-top);
  bottom: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0);
  z-index: 9995;
  transition: 0.3s;

  .mask-content {
    width: 100%;
    min-height: 30vh;
    max-height: 70vh;
    background: #f3f3f3;
    transform: translateY(100%);
    transition: 0.3s;
    overflow-y: scroll;
  }

  &.none {
    display: none;
  }

  &.show {
    background: rgba(0, 0, 0, 0.4);

    .mask-content {
      transform: translateY(0);
    }
  }
}

/* 优惠券列表 */
.coupon-item {
  display: flex;
  flex-direction: column;
  margin: 20upx 24upx;
  background: #fff;

  .con {
    display: flex;
    align-items: center;
    position: relative;
    height: 120upx;
    padding: 0 30upx;

    &:after {
      position: absolute;
      left: 0;
      bottom: 0;
      content: '';
      width: 100%;
      height: 0;
      border-bottom: 1px dashed #f3f3f3;
      transform: scaleY(50%);
    }
  }

  .left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    overflow: hidden;
    height: 100upx;
  }

  .title {
    font-size: 32upx;
    color: $font-color-dark;
    margin-bottom: 10upx;
  }

  .time {
    font-size: 24upx;
    color: $font-color-light;
  }

  .right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 26upx;
    color: $font-color-base;
    height: 100upx;
  }

  .price {
    font-size: 44upx;
    color: $base-color;

    &:before {
      content: '￥';
      font-size: 34upx;
    }
  }

  .tips {
    font-size: 24upx;
    color: $font-color-light;
    line-height: 60upx;
    padding-left: 30upx;
  }

  .circle {
    position: absolute;
    left: -6upx;
    bottom: -10upx;
    z-index: 10;
    width: 20upx;
    height: 20upx;
    background: #f3f3f3;
    border-radius: 100px;

    &.r {
      left: auto;
      right: -6upx;
    }
  }
}
</style>
